<template>
  <div class="resource-map">
    <div class="selection">
      <el-radio-group v-model="listQuery.selection" @change="getList">
        <el-radio label="">全部</el-radio>
        <el-radio label="1">精品</el-radio>
      </el-radio-group>
      <!-- <el-radio v-model="listQuery.selection" label="">全部</el-radio>
      <el-radio v-model="listQuery.selection" label="1">精品</el-radio> -->
    </div>
    <div v-if="!chartData.length" slot="empty" class="emptyBg">
      <el-empty :image-size="200"></el-empty>
    </div>
    <MyEcharts v-else :option="option" />
  </div>
</template>
<script>
import { openApiStatisticalDataQueryResourceMap } from "@/api/admin/data/data";
import Bus from "@/utils/bus.js";
export default {
  components: {
    MyEcharts: () => import("@/components/myEcharts/index.vue"),
  },
  data() {
    return {
      listQuery: {
        deptType: 1, //单位类型；1-校区，2-系，3-教研室
        selection: "", //是否精选课程，1-是，0-否
        sourceUnit: "", //单位
      },
      chartData: [],
      option: null,
    };
  },
  mounted() {
    this.getList();
    Bus.$on("sendSchoolId", (v) => {
      Object.assign(this.listQuery, v);
      this.getList();
    });
  },
  beforeDestroy() {
    Bus.$off("sendSchoolId");
  },
  methods: {
    getList() {
      openApiStatisticalDataQueryResourceMap(this.listQuery).then((res) => {
        let { data } = res.data;
        this.chartData = data;
        this.initEcharts(data);
      });
    },
    initEcharts(data) {
      // 饼图
      this.option = {
        tooltip: {},
        legend: {
          // 图例
          data: data.map((v) => v.name),
          right: "10%",
          top: "30%",
          orient: "vertical",
        },
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: "资源分布图",
          top: "0%",
          left: "center",
        },
        series: [
          {
            type: "pie",
            label: {
              show: true,
              formatter: "{b} : {c} ({d}%)", // b代表名称，c代表对应值，d代表百分比
            },
            radius: "50%", //饼图半径
            data: data,
          },
        ],
        animationDuration: 1000,
      };
    },
  },
};
</script>
<style scoped>
.resource-map {
  position: relative;
}
.selection {
  position: absolute;
  left: 20%;
  top: 0px;
  z-index: 2;
}
</style>